<template>
    <div>
        <div class="queryArea content">
            <!-- <div class="formItem">
                <div class="name">编号：</div>
                <el-input class="value" size="mini" placeholder="请输入内容"></el-input>
            </div> -->
            <div class="formItem">
                <div class="name">姓名：</div>
                <el-input class="value" size="mini" v-model="userName" placeholder="请输入内容"></el-input>
            </div>
            <div class="formItem">
                <div class="name">电话：</div>
                <el-input class="value" size="mini" v-model="phoneNum" placeholder="请输入内容"></el-input>
            </div>
            <div class="formItem queryOperation">
                <el-button type="primary" size="mini" round @click="infoQuery()">查询</el-button>
            </div>
        </div>

        <div class="content"  v-show="dataObj != undefined && dataObj != ''">
            <div class="minTile"><div class="line"></div><div>基本信息</div></div>
            <div class="basicSituation">
                <div class="formItem">
                    <div class="name">姓名：</div>
                    <div class="value" v-text="dataObj.name"></div>
                </div>
                <div class="formItem">
                    <div class="name">性别：</div>
                    <div class="value" v-show="dataObj.sex == 0">女</div>
                    <div class="value" v-show="dataObj.sex == 1">男</div>
                </div>
                <div class="formItem">
                    <div class="name">评审职称：</div>
                    <div class="value" v-show="dataObj.academicTitle == 1">正高</div>
                    <div class="value" v-show="dataObj.academicTitle == 2">副高</div>
                    <div class="value" v-show="dataObj.academicTitle == 3">中职</div>
                </div>
                <div class="formItem">
                    <div class="name">出生日期：</div>
                    <div class="value" v-text="dataObj.birth"></div>
                </div>

                <div class="formItem">
                    <div class="name">参加工作时间：</div>
                    <div class="value" v-text="dataObj.enterEmploymentTime"></div>
                </div>
                <div class="formItem">
                    <div class="name">工作部门：</div>
                    <div class="value" v-text="dataObj.department"></div>
                </div>
                <div class="formItem">
                    <div class="name">现任专业技术职务：</div>
                    <div class="value" v-text="dataObj.technologyTitle"></div>
                </div>
                <div class="formItem">
                    <div class="name">聘任时间：</div>
                    <div class="value" v-text="dataObj.appointTime"></div>
                </div>
                <div class="formItem">
                    <div class="name">获得资格时间：</div>
                    <div class="value" v-text="dataObj.getQualificationsTime"></div>
                </div>

                 <div class="formItem">
                    <div class="name">专业：</div>
                    <div class="value" v-text="dataObj.major"></div>
                </div>
                <div class="formItem">
                    <div class="name">最高学历：</div>
                    <div class="value" v-text="dataObj.lastEducation"></div>
                </div>
                <div class="formItem">
                    <div class="name">最后毕业学校、专业：</div>
                    <div class="value" v-text="dataObj.lastSchoolMajor"></div>
                </div>
                <div class="formItem">
                    <div class="name">毕业时间：</div>
                    <div class="value" v-text="dataObj.graduateTime"></div>
                </div>
                <div class="formItem">
                    <div class="name">最高学位：</div>
                    <div class="value" v-text="dataObj.highestDegree"></div>
                </div>
                <div class="formItem">
                    <div class="name">最高学位授予学校、专业：</div>
                    <div class="value" v-text="dataObj.highestSchoolMajor"></div>
                </div>
                <div class="formItem">
                    <div class="name">授予时间：</div>
                    <div class="value" v-text="dataObj.highestGetTime"></div>
                </div>
                <!-- <div class="formItem">
                    <div class="name">评审职称：</div>
                    <el-input class="value" size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">申报职称：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">是否破格：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div> -->
            </div>

        </div>

        <div class="content" v-show="applyList.length > 0">
            <div class="minTile"><div class="line"></div><div>我的职称审核进度</div></div>
            <div class="cContent">
                <div class="cTitle">评定教授职称应具备下列业绩条件</div>

                 <div class="workflow" v-for="(item,index) in applyList" :key="index">
                    <div class="workItem wTitle">{{item.academicTitle}}：</div>
                    <div class="workItem active">
                        <div class="point">
                            <label class="tip date">{{item.submitDate}}</label>
                            <img src="../../assets/informationEntry/wf.png">
                            <label>提交资料</label>
                        </div>
                        <div class="line">
                            <div class="c"></div>
                        </div>
                    </div>
                    <div class="workItem active">
                        <div class="point">
                            <label class="tip date">{{item.submitDate}}</label>
                            <img src="../../assets/informationEntry/wf.png">
                            <label>资料评审中</label>
                        </div>
                        <div class="line">
                            <div class="c"></div>
                        </div>
                    </div>
                    <div class="workItem" :class="item.firstApproveStatus == 1?'active':'notPass'">
                        <div class="point">
                            <label class="tip date">{{item.firstApproveDate}}</label>
                            <div class="detail"  @click="reviewDetail(item)">详情</div>
                            <img v-show="item.firstApproveStatus == 1" src="../../assets/informationEntry/wf.png">
                            <img v-show="item.firstApproveStatus == 0" src="../../assets/informationEntry/wtg.png">
                            <label style="color:#31478f;" v-show="item.firstApproveStatus == 1">初审已通过</label>
                            <label style="color:#FF1E00;" v-show="item.firstApproveStatus == 0" >初审未通过</label>
                        </div>
                        <div class="line">
                            <div class="c"></div>
                        </div>
                    </div>
                    <div class="workItem" :class="item.secondApproveStatus == 'pass'?'active':''">
                        <div class="point">
                            <label class="tip date">{{item.secondApproveDate}}</label>
                            <div class="detail" v-show="item.secondApproveStatus != 'checking'" @click="reviewDetail(item)">详情</div>
                            <img v-show="item.secondApproveStatus == 'pass'" src="../../assets/informationEntry/wf.png">
                            <img v-show="item.secondApproveStatus == 'checking'" src="../../assets/informationEntry/wfd.png">
                            <img v-show="item.secondApproveStatus == 'notPass'" src="../../assets/informationEntry/wtg.png">
                            <label style="color:#31478f;" v-show="item.secondApproveStatus == 'pass'">复审已通过</label>
                            <label style="color:#31478f;" v-show="item.secondApproveStatus == 'checking'" >复审通过</label>
                            <label style="color:#FF1E00;" v-show="item.secondApproveStatus == 'notPass'" >复审未通过</label>
                        </div>
                        <div class="line">
                            <div class="c"></div>
                        </div>
                    </div>
                    <div class="workItem" :class="item.secondApproveStatus == 'pass'?'active':''">
                        <div class="point">
                            <div class="detail" style="top: -26px;right: 0px;left: -2px;" v-show="item.secondApproveStatus != 'checking'" @click="reviewDetail(item)">详情</div>
                            <img v-if="item.secondApproveStatus == 'pass'" src="../../assets/informationEntry/wf.png">
                            <img v-else src="../../assets/informationEntry/wfd.png">
                            <label style="color:#31478f;" v-if="item.secondApproveStatus == 'pass'">评审完成</label>
                            <label v-else >评审完成</label>
                        </div>
                    </div>
                    <div class="workItem result">
                        <div @click="reviewDetail(item)">
                            <img v-show="item.secondApproveStatus == 'notPass'" src="../../assets/home/np.png">
                            <img v-show="item.secondApproveStatus == 'pass'" src="../../assets/home/p.png">
                            <div style="color:#FF1E00;margin-top:16px;" v-show="item.secondApproveStatus == 'notPass'">资料存在问题</div>
                            <div style="color:#00A854;margin-top:16px;" v-show="item.secondApproveStatus == 'pass'">资料审核完成</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="background">
            <img src="../../assets/background.png">
        </div>

    </div>
</template>

<script>

import { infoQueryPost } from '@/service/api'
export default {
    data(){
        return {
            phoneNum:"",
            userName:"",
            dataObj:"",
            applyList:[]
        }
    },
    methods:{
         // 审核详情
        reviewDetail(item){
            this.$router.push({name: "reviewsInfo",params:{id:item.id}});
        },
        infoQuery(){

            if(this.phoneNum.trim() == "" && this.userName.trim() == ""){
                this.$message({message: '请输入查询条件',type: 'warning'});
                return;
            }

            var formData = new FormData;
            formData.append("phoneNum",this.phoneNum);
            formData.append("userName",this.userName);
            infoQueryPost(formData).then(res => {
                if(res.code == 200){
                    if(res.data.qaUserInfo == undefined){
                        this.$message({message: '未查询到任何信息',type: 'warning'});
                        this.dataObj = "";
                        this.applyList = "";
                    }else{
                        this.dataObj = res.data.qaUserInfo;
                        if(res.data.applyList != undefined){
                            this.applyList = res.data.applyList;
                        }
                    }
                }
            });
        }
    }
}
</script>

<style scoped>

.content{
    padding: 20px 12px;
    background: white;
    border-radius:8px;
    box-shadow: 3px 1px 12px 1px #eaeaea;
    margin-bottom: 18px
}

.background{
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 0px;
    text-align: center;
}
.background>img{
    width: 100%;
    opacity: 0.4;
    margin-bottom: -10px;
    /*margin-bottom: -10px;*/
}

/* 小标题 */
.minTile{
    display:flex;
    align-items: center;
    background: #f5f8fe;
    color: #417FFE;
    font-size: 14px;
    padding:13px 18px;
}
.minTile>.line{
    width: 3px;
    height: 12px;
    background:#417FFE;
    margin-right: 9px;
}

/* 基本情况 */
.basicSituation{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    margin-top: 12px;
    margin-bottom: 24px;
}
.formItem{
    width: 33%;
    display: flex;
    flex-direction: row;
    align-items: center;
    color:#333333;
    font-size: 14px;
    margin:5px 0px;
}
.formItem>.name{
    text-align: right;
    padding-right: 4px;
    width: 40%;
}
.formItem>.value{
    width: 50%;
}



.cContent{
    padding: 20px 30px;
}
.cTitle{
    font-size: 16px;
    color: #333333;
    font-weight: bold;
}
.cList{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #333333;
    font-size: 14px;
    padding: 40px 0px;
    border-bottom: solid #ececec 3px;
}
.cList>.cListItemTitle{
    min-width: 160px;
}
.cList>.result{
    font-size: 16px;
    margin-left: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cList>.result>img{
    width: 72px;
    margin-bottom: 16px;
}




/* 工作流 */
.workflow{
    display: flex;
    flex-direction: row;
    margin-top: 60px;
    margin-bottom: 60px;
}
.workflow>.workItem:not(:nth-child(6)){
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}
.workflow>.workItem.wTitle{
    justify-content: flex-start;
    padding-top: 10px;
    /* align-items: center; */
    color: #333333;
    font-size: 14px;
    padding-right: 50px;
}
.workflow>.workItem.result{
    position: relative;
    width: 100px;
    height: 100px;
    justify-content:center;
}
.workflow>.workItem.result>div{
    cursor: pointer;
    display: flex;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: -24px;
}
.workflow>.workItem.result>div>img{
    width: 72px;
}
.workflow>.workItem .point{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    color: #B0B0B0;
    font-size: 16px;
}
.workflow>.workItem .point>img{
    width: 39px;
    height: 39px;
}
.workflow>.workItem .point>.detail{
    position: absolute;
    top: -30px;
    font-size: 10px;
    color: white;
    right: -78px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #417FFE;
    cursor: pointer;
}
.workflow>.workItem .point>.tip{
    color: #B0B0B0;
    top: -20px;
    font-size: 12px;
}

.workflow>.workItem .point>label{
    position: absolute;
    top: 50px;
    white-space: nowrap;
}
.workflow>.workItem .line{
    height: 39px;
    flex-grow: 1;
    min-width: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.workflow>.workItem .line>.c{
    background: gray;
    height: 4px;
    flex-grow: 1;
    background: -webkit-linear-gradient(left,#b0b0b0, #ebebeb); /* Safari 5.1 - 6 */
    background: -o-linear-gradient(right,#b0b0b0, #ebebeb); /* Opera 11.1 - 12*/
    background: -moz-linear-gradient(right,#b0b0b0, #ebebeb); /* Firefox 3.6 - 15*/
    background: linear-gradient(to right, #b0b0b0,  #ebebeb); /* 标准的语法 */
}


.workflow>.workItem.active .point{
    color: #417FFE;
}
.workflow>.workItem.notPass .point{
    color: #FF1E00;
}
.workflow>.workItem.active .point>.tip{
    color: #417FFE;
}
.workflow>.workItem.notPass .point>.tip{
    color: #FF1E00;
}
.workflow>.workItem.active .line>.c{
    background: -webkit-linear-gradient(left,#31478f, #dbdbdb); /* Safari 5.1 - 6 */
    background: -o-linear-gradient(right,#31478f, #dbdbdb); /* Opera 11.1 - 12*/
    background: -moz-linear-gradient(right,#31478f, #dbdbdb); /* Firefox 3.6 - 15*/
    background: linear-gradient(to right, #31478f,  #dbdbdb); /* 标准的语法 */
}
.workflow>.workItem.notPass .line>.c{
    background: -webkit-linear-gradient(left,#FF1E00, #dbdbdb); /* Safari 5.1 - 6 */
    background: -o-linear-gradient(right,#FF1E00, #dbdbdb); /* Opera 11.1 - 12*/
    background: -moz-linear-gradient(right,#FF1E00, #dbdbdb); /* Firefox 3.6 - 15*/
    background: linear-gradient(to right, #FF1E00,  #dbdbdb); /* 标准的语法 */
}

.workTip{
    display: flex;
    align-items:center;
    justify-content: center;
}



/* 查询区域 */
.queryArea.content{
    display: flex;
    flex-direction: row;
}
.queryArea.content .formItem{
    width: auto;
    margin-right: 30px;
}
.queryArea.content .formItem .value{
    min-width: 160px;
}
.queryArea.content .formItem.queryOperation{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 2;
}
.queryArea.content .formItem.queryOperation button{
    padding: 7px 38px;
    font-size: 15px;
}
</style>
